<template>
	<view class="container">
		<!-- 消息类型切换 -->
		<view class="message-tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="['tab-item', currentTab === index ? 'active' : '']"
				@click="switchTab(index)"
			>
				<text>{{tab.name}}</text>
				<view class="badge" v-if="tab.unread">{{tab.unread}}</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<scroll-view class="message-list" scroll-y="true">
			<view 
				class="message-item" 
				v-for="(message, index) in currentMessages" 
				:key="index"
				@click="handleMessageClick(message)"
			>
				<image class="avatar" :src="message.avatar" mode="aspectFill"/>
				<view class="message-content">
					<view class="message-header">
						<text class="name">{{message.name}}</text>
						<text class="time">{{message.time}}</text>
					</view>
					<text class="message-text">{{message.content}}</text>
				</view>
				<view class="unread-dot" v-if="!message.isRead"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			tabs: [
				{ name: '系统通知', unread: 2 },
				{ name: '互动消息', unread: 3 },
				{ name: '私信', unread: 1 }
			],
			messagesList: {
				0: [ // 系统通知
					{
						id: 1,
						avatar: '/static/system-notice.png',
						name: '系统通知',
						content: '恭喜您获得新的游戏成就！',
						time: '10:30',
						isRead: false,
						type: 'achievement'
					},
					{
						id: 2,
						avatar: '/static/system-notice.png',
						name: '系统通知',
						content: '您的账号安全等级较低，建议开启二步验证',
						time: '昨天',
						isRead: true,
						type: 'security'
					}
				],
				1: [ // 互动消息
					{
						id: 3,
						avatar: '/static/user-avatar1.png',
						name: '李四',
						content: '赞了您的游戏评测',
						time: '13:45',
						isRead: false,
						type: 'like'
					},
					{
						id: 4,
						avatar: '/static/user-avatar2.png',
						name: '王五',
						content: '回复了您的评论：确实是个好游戏！',
						time: '昨天',
						isRead: false,
						type: 'comment'
					}
				],
				2: [ // 私信
					{
						id: 5,
						avatar: '/static/user-avatar3.png',
						name: '赵六',
						content: '有空一起组队吗？',
						time: '12:20',
						isRead: false,
						type: 'chat'
					}
				]
			}
		}
	},
	computed: {
		currentMessages() {
			return this.messagesList[this.currentTab] || []
		}
	},
	methods: {
		switchTab(index) {
			this.currentTab = index
		},
		handleMessageClick(message) {
			// 标记消息为已读
			message.isRead = true
			
			// 根据消息类型处理点击事件
			switch(message.type) {
				case 'chat':
					uni.navigateTo({
						url: '/pages/chat/chat'
					})
					break
				case 'achievement':
					uni.navigateTo({
						url: '/pages/my/achievement/achievement'
					})
					break
				// 可以添加其他类型的处理
			}
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding-top: 10px;
}

.message-tabs {
	display: flex;
	background: #2D2D44;
	padding: 10px;
	margin-bottom: 10px;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 8px 0;
	position: relative;
	color: #6E6C89;
}

.tab-item.active {
	color: #9796B8;
	font-weight: bold;
}

.badge {
	position: absolute;
	top: 0;
	right: 20%;
	background: #FF6B6B;
	color: white;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 10px;
}

.message-list {
	height: calc(100vh - 60px);
}

.message-item {
	display: flex;
	padding: 15px;
	background: #2D2D44;
	margin-bottom: 1px;
	position: relative;
}

.message-item:active {
	background: #3D3D54;
}

.avatar {
	width: 45px;
	height: 45px;
	border-radius: 23px;
	margin-right: 12px;
}

.message-content {
	flex: 1;
}

.message-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}

.name {
	color: #9796B8;
	font-size: 15px;
	font-weight: 500;
}

.time {
	color: #6E6C89;
	font-size: 12px;
}

.message-text {
	color: #6E6C89;
	font-size: 13px;
}

.unread-dot {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #9796B8;
}
</style> 